import React, { useState, useEffect, useRef } from 'react'
import TableList from './components/TableList'
import SearchList from './components/SearchList'
import { Button } from 'antd'
import "./index.scss"
import NewPicModal from './components/NewPicModal'
import usePicStore, { InitiaState, initState, ActionState } from '../../store/usePicStore'
import useRequest from '../../hooks/useRequest'

interface DefaultValue {
    state: InitiaState
    dispatch: any
    ActionState: typeof ActionState | null
}
interface Request {
    getClassifyList: (params: any) => Promise<any>
}
export const Context = React.createContext<DefaultValue>({ state: initState, dispatch: null, ActionState: null })
const PicList = () => {
    const handleCancel = () => {
        dispatch({ type: ActionState.SET_VISIBLE, payload: false })
    }
    const handleOk = () => {
        handleCancel();
        (tableRef.current as any).getData()
    }
    const tableRef = useRef()
    const request = useRequest<Request>({ modulePath: 'picClassify' })
    const { state, dispatch, ActionState } = usePicStore()
    useEffect(() => {
        getClassify()
    }, [])
    const getClassify = async () => {
        const { data: { list } } = await request.getClassifyList({ page: 1, limit: 100000 })
        dispatch({ type: ActionState.SET_CLASSIFY, payload: list })
    }
    return <Context.Provider value={{ state, dispatch, ActionState }}>
        <div className="im_pic_list">
            <SearchList></SearchList>
            <div className="im_pic_list_function">
                <Button type="primary" onClick={() =>
                    dispatch({ type: ActionState.SET_VISIBLE, payload: true })}>上传图片</Button>
            </div>
            <TableList ref={tableRef}></TableList>
            {/* 上传图片 */}
            <NewPicModal handleCancel={handleCancel} handleOk={handleOk}></NewPicModal>
        </div>
    </Context.Provider>
}

export default PicList